<template>
    <div class="sett">
        <div>
            <p style=" padding-top:20px;text-align: center">
                <a :href="'#/touxiang/'+uids">
                  <img :src="'http://192.168.13.196:2200/upload/'+touxiang" style="width:30%;height:30%" alt="">
                </a>
            </p>
            <div style=" padding-top:20px;text-align: center">
                <p style="text-align: left;margin-left:50px;font-size:12px;color:#aaa">昵称</p>
                <input v-model="name" type="text" style="width:70%;margin-bottom:10px">
                <p style="text-align: left;margin-left:50px;font-size:12px;color:#aaa">生日</p>
                <input v-model="bron" type="text" style="width:70%;margin-bottom:10px">
                <p style="text-align: left;margin-left:50px;font-size:12px;color:#aaa">性别</p>
                <select v-model="isMale" name="" id="" style="width:70%;margin-bottom:10px">
                    <option value="true">男</option>
                    <option value="false">女</option>
                </select>
                <p style="text-align: left;margin-left:50px;margin-bottom:10px">
                    <group style="width:83%;">
                        <x-input v-model="phone" name="mobile" placeholder="手机号码" keyboard="number" is-type="china-mobile"></x-input>
                    </group>
                </p>
                <p style="text-align: left;margin-left:50px;font-size:12px;color:#aaa">个人简介</p>
                <input v-model="motto" type="text" style="width:70%;margin-bottom:30px">
                <br>
                <button @click="meset" style="background:#12a7b4;height:30px;width:100px;margin-bottom:30px;border:none;box-shadow: -1px -1px 5px #aaa;" type="submit">修改</button>
            </div>
        </div>
    </div>
</template>
<script>
import { XInput, Group, XButton } from "vux";
export default {
  data() {
    return {
      name: "",
      bron: "",
      isMale: "",
      phone: "",
      motto: "",
      uids: "",
      touxiang: []
    };
  },
  components: {
    XInput,
    XButton,
    Group
  },
  methods: {
    meset: function(ev) {
      ev.preventDefault();
      this.$axios
        .post("/top/mmset", {
          name: this.name,
          bron: this.bron,
          isMale: this.isMale,
          phone: this.phone,
          motto: this.motto
        })
        .then(data => {
          if (data.data.error == 1) {
            alert(data.data.message);
          } else {
            alert(data.data.message);
          }
          //   console.log(data);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted: function() {
    var that = this;
    var ids = this.$route.params.name;
    console.log(ids);
    this.$axios
      .post("/top/scert", {
        ids: ids
      })
      .then(data => {
        console.log(data.data);
        if (data.data.error == 1) {
          alert(data.data.message);
        } else {
          console.log(data.data.data);
          var datas = data.data.data;
          this.name = datas.name;
          this.bron = datas.bron;
          this.isMale = datas.isMale;
          this.phone = datas.phone;
          this.motto = datas.motto;
          this.uids = datas._id;
          that.touxiang = datas.avatar;
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style scoped>
.sett {
  margin-top: 81px;
  /* text-align: center */
}
input {
  border: none;
  background: #ccc;
  padding: 2px 5px;
  border-bottom: solid 1px #ccc;
}
</style>
